<template>
    <div class="index">
        <!-- https://huajing-1344106420.cos.ap-shanghai.myqcloud.com/bg.jpg -->
        <!-- <div class="text-right top"><el-image style="width: 30%" src="https://huajing-1344106420.cos.ap-shanghai.myqcloud.com/index-logo.png" fit="contain" /></div>
        <el-row :gutter="0" class="brief">
            <el-col :span="6">
                <h2 class="text-right" style="padding-top: 50px;padding-right: 20px;">科技创新、务实发展</h2>
            </el-col>
            <el-col :span="6">
                <h2 class="text-left" style="padding-top: 100px;padding-left: 20px;">精细耕耘、合作共赢</h2>
            </el-col>
            <el-col :span="12" class="text-right">
                <el-row :gutter="0">
                    <el-col :span="8"><el-image style="height: 200px;width: 100%;" src="https://huajing-1344106420.cos.ap-shanghai.myqcloud.com/index1.png" fit="cover" /></el-col>
                    <el-col :span="8"><el-image style="height: 200px;width: 100%;" src="https://huajing-1344106420.cos.ap-shanghai.myqcloud.com/index2.png" fit="cover" /></el-col>
                    <el-col :span="8"><el-image style="height: 200px;width: 100%;" src="https://huajing-1344106420.cos.ap-shanghai.myqcloud.com/index3.png" fit="cover" /></el-col>
                </el-row>
            </el-col>
        </el-row> -->
        <div >
            <el-card class="login" shadow="always" v-show="isLogin">
                <h3 class="text-center">苏州华靖建筑科技有限公司</h3>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="loginForm" size="large">
                    <el-form-item class="mt10" prop="idcard">
                        <el-input v-model="ruleForm.idcard" :prefix-icon="User" placeholder="请输入身份证号" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" :prefix-icon="Lock" :type='passwordType' >
                            <template #suffix>
                                <el-icon @click="passwordType = 'text'" class="cp"><View /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-button type="primary" style="width: 100%;" @click="submitForm(ruleFormRef)" :loading="loading"> 登录 </el-button>
                        <el-divider><el-text class="cp" @click="isLogin = false">注册</el-text></el-divider>
                    </el-form-item>
                </el-form>
            </el-card>

            <el-card class="register" shadow="always" v-show="!isLogin">
                <h3 class="text-center">苏州华靖建筑科技有限公司</h3>
                <el-form ref="ruleFormRegRef" :model="regForm" :rules="regRules" label-width="auto" class="ruleForm mt20" size="large">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="regForm.name" />
                            </el-form-item>
                            <el-form-item label="手机号码" prop="mobile">
                                <el-input v-model="regForm.mobile" maxlength="11" show-word-limit />
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input v-model="regForm.password" type="password" />
                            </el-form-item>
                            <el-form-item label="证件类型" prop="id_type">
                                <el-radio-group v-model="regForm.id_type">
                                    <el-radio :value="1" >身份证</el-radio>
                                    <el-radio :value="2" >护照</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="民族" prop="ethnicity">
                                <el-select v-model="regForm.ethnicity" placeholder="请选择">
                                    <el-option v-for="item in ethnicGroups" :key="item" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-mention v-model="regForm.more.email" :options="email_" />
                            </el-form-item>
                            <el-form-item label="出生日期" prop="birth_date">
                                <el-date-picker v-model="regForm.birth_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="证件号码" prop="idcard">
                                <el-input v-model="regForm.idcard" />
                            </el-form-item>
                            <el-form-item label="政治面貌" prop="political_status">
                                <el-select v-model="regForm.political_status" placeholder="请选择">
                                    <el-option label="中共党员" value="中共党员" />
                                    <el-option label="无党派人士" value="无党派人士" />
                                    <el-option label="群众" value="群众" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="文化程度" prop="education">
                                <el-select v-model="regForm.education" placeholder="请选择">
                                    <el-option label="初中及以下" value="初中及以下" />
                                    <el-option label="中专" value="中专" />
                                    <el-option label="高中" value="高中" />
                                    <el-option label="技校" value="技校" />
                                    <el-option label="大学专科" value="大学专科" />
                                    <el-option label="大学本科" value="大学本科" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="性别" prop="sex">
                                <el-radio-group v-model="regForm.sex">
                                    <el-radio :value="1" >男</el-radio>
                                    <el-radio :value="0" >女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="岗位" prop="posts">
                                <el-input v-model="regForm.posts" />
                            </el-form-item>
                            <el-form-item label="在职/离职" prop="employees">
                                <el-radio-group v-model="regForm.employees">
                                    <el-radio :value="1" >在职</el-radio>
                                    <el-radio :value="2" >离职</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="编内/编外" prop="formal">
                                <el-radio-group v-model="regForm.formal">
                                    <el-radio :value="1" >编内</el-radio>
                                    <el-radio :value="0" >编外</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            
                        </el-col>
                    </el-row>
                        
                    <el-form-item>
                        <el-button type="primary" style="width: 100%;" @click="submitRegForm(ruleFormRegRef)" :loading="loading"> 注册 </el-button>
                        <el-divider><el-text class="cp" @click="isLogin = true">登录</el-text></el-divider>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <!-- <div class="text-center footer">
            <h1>苏州华靖建筑科技有限公司</h1>
            <p>Suzhou   Huajing  Construction  Technology   Co.,  Ltd</p>
            <p>科技创新、精细耕耘、务实发展、合作共赢</p>
            <div class="text-center"><a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">苏ICP备2025164882号-1</a></div>
            <div class="text-right p15">
                <el-text type="success" class="cp" @click="dialogVisible = true">登录</el-text>
                <el-divider direction="vertical" />
                <el-text type="success" class="cp">注册</el-text>
            </div>
        </div> -->
    </div>
</template>

<script lang="ts" setup>
import { ref,reactive } from 'vue'
import { User, Lock, View } from '@element-plus/icons-vue'
import router from '../router';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import http from '../util/request';
import func from '../util/function';

const loading = ref<boolean>(false)
const isLogin = ref<boolean>(true)
    
const passwordType = ref<string>('password')
interface RuleForm {
    idcard: number|string
    password: string
}

const ruleFormRef = ref<FormInstance>()
const ruleFormRegRef = ref<FormInstance>()
    
const ruleForm = ref<RuleForm>({
    idcard: '',
    password: '',
})

const rules = reactive<FormRules<RuleForm>>({
    idcard: [
        { required: true, message: '请输入身份证号码', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 30, message: '范围在6-30字之间', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            http.post('/login',ruleForm.value).then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);return;
                }
                ElMessage.success(response.data.msg);
                sessionStorage.setItem('token',response.data.token)
                sessionStorage.removeItem('project')
                sessionStorage.setItem('user',JSON.stringify(response.data.user))
                router.push({ name: 'public'})
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}


const regForm = ref<any>({id:0,more:{email:'/'}})
const ethnicGroups:string[] = func.ethnicGroups()
const email_ = ref([
    {label: 'qq.com',value: 'qq.com',},
    {label: '163.com',value: '163.com',},
    {label: '126.com',value: '126.com',},
    {label: 'sina.com',value: 'sina.com',},
    {label: 'gmail.com',value: 'gmail.com',},
    {label: 'outlook.com',value: 'outlook.com',},
])


const regRules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
    ],
    mobile: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
    ],
    idcard: [
        { required: true, message: '请输入证件号码', trigger: 'blur' },
        { min: 18, max: 18, message: '范围在18个数字', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 30, message: '范围在6-30字之间', trigger: 'blur' },
    ],
})

const submitRegForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            http.post('/register',regForm.value).then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);return
                }
                ElMessage.success(response.data.msg);
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style scoped>
.index{position: absolute;background-image: url('https://huajing-1344106420.cos.ap-shanghai.myqcloud.com/bg.jpg');background-repeat: no-repeat;background-size: cover;width: 100%;height: 100vh;}
.top{padding: 30px;}
.brief{height: 200px;background-color: #EFEFEF;margin-top: 20px;}
.brief .l{padding: 0;line-height: 100px;padding: 0px 60px;}
h1{font-size: 3rem;}
h2{font-size: 2rem;height: 100px;}
p{font-size: 2rem;}
.footer{padding: 30px 0px;background-color: #3d6abf;color: #FFFFFF;position: absolute;bottom: 0px;width: 100%;}
.footer a{color: #FFFFFF;}
.login{position: relative;z-index: 99;width: 500px;margin: 0px auto;margin-top: 12%;}
.register{position: relative;z-index: 99;width: 800px;margin: 0px auto;margin-top: 6%;}
.register .el-input{width: 220px;}
.register .el-select{width: 220px;}
.register .el-mention{width: 220px;}
.register .el-date-picker{width: 220px;}
.loginForm{width: 320px;margin:0px auto;top: 76vh;}
</style>